<template>
  <div>
    <!-- 修改密码 -->
    <div>
      <!-- 标题 -->
      <header>
        <Title></Title>
      </header>
      <!-- 列表 -->
      <div class="list">
        <van-form @submit="onSubmit">
          <van-field
            v-model="loginName"
            name="账号"
            label="账号"
            placeholder="账号"
            :clearable="true"
            :required="true"
            :rules="phoneRules"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :required="true"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            v-model="phonenumber"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            :clearable="true"
            :required="true"
            :rules="phones"
          />
          <van-field
            v-model="code"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
            :required="true"
            :rules="Codes"
          >
            <van-button
              slot="button"
              size="small"
              type="info"
              :disabled="disabled"
              @click="hair"
            >发送验证码</van-button>
          </van-field>
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" :disabled="tijiao" @click="onSubmit">提交</van-button>
          </div>
        </van-form>
      </div>
      <!-- 底部导航 -->
      <Botto></Botto>
    </div>
  </div>
</template>
<script>
import Botto from "../components/Bottom.vue";
import Title from "../components/Title";
import { Verification } from "../api/User-api";
import { forget } from "../api/User-api";
export default {
  data() {
    return {
      loginName: "",
      password: "",
      phonenumber: "",
      code: "",
      disabled: false,
      tijiao:false,
      phoneRules: [
        { required: true, message: "请输入账号" },
        {
          validator: this.phoneValidator,
          message: "只能为字母和数字且长度在4-10个字符"
        },
        { validator: this.empty, message: "请输入账号" }
      ],
      codeRules: [
        { required: true, message: "请输入密码" },
        { validator: this.codeRule, message: "长度在6-10个字符" },
        { validator: this.empty, message: "请输入密码" }
      ],
      phones: [
        { required: true, message: "请输入手机号" },
        { validator: this.phone, message: "格式错误 应为11位数字" }
      ],
      Codes: [{ validator: this.phone, message: "验证码错误" }]
    };
  },
  components: {
    Botto,
    Title
  },
  methods: {
    phoneValidator(val) {
      return /^[a-zA-Z0-9]{4,10}$/.test(val);
    },
    codeRule(val) {
      return /^[a-zA-Z0-9]{6,10}$/.test(val);
    },
    empty(val) {
      if (val == null) {
        return false;
      }
    },
    hair() {
      if (this.disabled == false) {
        this.disabled = true;
        setTimeout(() => {
          this.disabled = false;
        }, 60000);
        Verification(this.phonenumber).then(res => {
          console.log(res.code);
        });
      }
    },
    codes(val) {
      return val == null;
    },
    onSubmit() {
      if (this.tijiao == false) {
        this.tijiao = true;
        setTimeout(() => {
          this.tijiao = false;
        }, 3000);
        forget(this.loginName, this.code, this.phonenumber, this.password).then(
          res => {
            if (res.code == 500) {
              this.$notify({
                type: "danger",
                message: res.msg
              });
            } else {
              this.$notify({
                type: "success",
                message: res.msg
              });
            }
          }
        );
      }
    }
  }
};
</script>
<style lang="less" scoped>
.van-field {
  /deep/ span {
    font-size: 16px;
    // font-weight: 600;
  }
}
</style>